<template>
    <div class="environment-container">
        <section class="key-container">
            <ul>
                <!--suppress JSUnusedLocalSymbols -->
                <template v-for="(_, _k) in envs.envs">
                    <li
                        :key="_k"
                        @click="changeKey(_k)"
                        :class="{ active: _k === envs.currentKey.name }">
                        {{ _k }}
                    </li>
                </template>
            </ul>
        </section>

        <section class="value-container">
            <a-input placeholder="请输入关键字">
                <template slot="prefix">
                    <a-icon type="search" />
                </template>
            </a-input>

            <div class="value-table">
                <a-table
                    :row-key="'name'"
                    :columns="columns"
                    :data-source="configItems()"
                    :pagination="false"
                    :show-header="false"
                    :scroll="{ y: 700 }">
                </a-table>
            </div>
        </section>
    </div>
</template>

<script>
    import { mapState, mapGetters } from 'vuex';

    // 1. 定义表头.
    const columns = [
        { title: '配置项', dataIndex: 'name', width: '30%' },
        { title: '项目值', dataIndex: 'value', width: '70%' },
    ];

    export default {
        name: 'Environment',
        computed: {
            ...mapState({
                envs: (state) => state.env,
            }),
            ...mapGetters('env', {
                configItems: 'getConfigItems',
            }),
        },
        data() {
            return {
                columns,
            };
        },
        methods: {
            changeKey(key) {
                this.$store.commit('env/changeKey', key);
            },
        },
        mounted() {
            this.$store.dispatch('env/loadEnvs', this.$route.params.id);
        },
    };
</script>

<style lang="scss" scoped>
    .environment-container {
        display: flex;
        flex-direction: row;

        & > section {
            padding: 24px;
            background: #FFF;
            border-radius: 8px;
            box-shadow: 0 0 10px 0 rgba(226, 232, 237, .5);
        }

        & > .key-container {
            margin-right: 2%;
            width: 25%;

            li {
                margin-bottom: 8px;
                height: 50px;
                line-height: 50px;
                text-indent: 48px;
                font-size: 16px;
                font-weight: 400;
                color: rgba(0, 0, 0, .65);
                border-radius: 4px;
                border: 1px solid #D9E1E8;
                cursor: pointer;

                &.active {
                    color: #FFF;
                    background: #2A6CF0;
                    border-color: #2A6CF0;
                }
            }
        }

        & > .value-container {
            width: 73%;

            .value-table {
                margin-top: 24px;
                border: 1px solid #D9E1E8;
            }
        }
    }
</style>
